<!-- 自定义表格、可以在很大程度上解决代码相似问题 -->
<template>
	<Table border :columns="columns" :data="data">
		<!-- 定义组件所需要的插槽 -->
		<template v-for="dynamicSlotName in customSlots" v-slot:[dynamicSlotName]="{row, index}">
			<slot :name="dynamicSlotName"
				v-bind:row="row" v-bind:index="index"></slot>
		</template>
		
		<template #footer v-if="pagination">
			<div style="min-width: 300px; max-width: 380px;">
				<van-pagination v-model="page" :total-items="total" 
						:items-per-page="rows" @page-click="$emit('page-click', page)"
						:show-page-size="5" force-ellipses>
				</van-pagination>
			</div>
		</template>
	</Table>
</template>

<script>
import VanPagination from './VanPagination.vue';

export default {
	props: {
		columns:{
			type: Array, 
			required: true
		},
		data: {
			type: Array, 
			required: true
		},
		pagination: {
			type: Boolean , 
			required: false, 
			default: true 
		}, 
		current: {
			type: Number, 
			required: false , 
			default : 1
		} , 
		rows: {
			type: Number,
			required: false , 
			default : 10
		},
		total: {
			type: Number,
			required: false,
			default: 0
		}
	}, 
	data() {
		return {
			page: this.current, 
		}
	},
	computed: {
		// 计算该组件需要哪些插槽
		customSlots() {
			return this.columns.filter(col => col.slot != null).map(col => col.slot) ;
		}
	}, 
	components: {
		VanPagination,
	}
}
</script>

<style>
</style>